<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>银企直联明细下载</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .input-container {
            display: flex;
        }

        .input-container input {
            flex: 1;
            margin-right: 0px;
        }

        tr td:nth-child(1),
        tr td:nth-child(3) {
            background-color: #E8EAED; /* 设置背景颜色 */
        }

    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 80px">
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">查询条件：</label>
                <div class="layui-input-block">
                    <input type="text" name="companyNo" required lay-verify="required" placeholder="请输入输待查账号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="margin-left: 10px;">
                    <input type="text" required lay-verify="required" name="endBeginDate" id="dateRange" placeholder="请选择查询时间范围" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="post-initPlat">查询</button>
            </div>
        </div>
        <table id="demo" lay-filter="test"></table>
        <div id="pageHtml"></div>

    </form>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'laydate','table', 'form',"laypage"], function () {
        const $ = layui.$, form = layui.form,admin=layui.admin, laypage = layui.laypage, element = layui.element, laydate = layui.laydate,table = layui.table;
        let limit = 10, page = 1, count = 10, companyNo = null, beginDate = null, endDate = null;
        element.render('icon');
        // 初始化时间范围选择器
        laydate.render({
            elem: '#dateRange',
            range: true,
            format: 'yyyy/MM/dd' // 使用斜杠作为时间分隔符
        });
        dataPages([]);
        function dataPages(dataPages){
            table.render({
                elem: '#demo'
                ,height: 312
                ,data:dataPages
                ,page: false //开启分页
                ,cols: [[ //表头
                    {field: 'tradeDate', title: '交易日期',width:120}
                    ,{field: 'tradeFlowNo', title: '主机交易流水号',width:120}
                    ,{field: 'accountingFlowNo', title: '记账流水号',width:120}
                    ,{field: 'tradeNo', title: '客户端交易标志',width:120}
                    ,{field: 'borrowerAmt', title: '借方发生额',width:120}
                    ,{field: 'lenderAmt', title: '贷方发生额',width:120}
                    ,{field: 'balance', title: '账户余额',width:120}
                    ,{field: 'voucherType', title: '凭证种类',width:120}
                    ,{field: 'voucherNo', title: '凭证号',width:120}
                    ,{field: 'useTo', title: '用途',width:120}
                    ,{field: 'remark', title: '备注',width:120}
                    ,{field: 'tradeAddress', title: '交易地点',width:120}
                    ,{field: 'sideAccNo', title: '对方账号',width:120}
                    ,{field: 'sideAccName', title: '对方账号名称',width:120}
                    ,{field: 'sideOpenName', title: '对方开户行',width:120}
                    ,{field: 'tradeTime', title: '交易时间戳',width:120}
                ]]
            });
        }

        form.on('submit(post-initPlat)', function (dataFild) {
            companyNo = dataFild.field.companyNo
            const  endBeginDate=dataFild.field.endBeginDate.split("-");
             beginDate=endBeginDate[0].replaceAll("/","-");
             endDate=endBeginDate[1].replaceAll("/","-");
            loadDown();
            return false;
        });
        function loadDown() {
            admin.req({
                url: "/platform/cmbc/getTrsDtlDownLoad",
                data: {sartNo: page, queryRows: limit, acntNo: companyNo, dateFrom: beginDate, dateTo: endDate},//向后台传送页码值
                type: 'post',
                done: function (res) {
                    let data = res.data;
                    count=data['totalNum'];
                    if(data['dataStreamList']==null)return;
                    dataPages(data['dataStreamList']);
                    laypage.render({
                        elem: 'pageHtml' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: count //数据总数，从服务端得到
                        , limit: 10
                        , curr: page
                        , limits: [10, 20, 50, 100, 200]
                        , layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip']
                        , jump: function (obj, first) {
                            //首次不执行
                            if (!first) {
                                page = obj.curr;
                                limit = obj.limit;
                                loadDown()
                            }
                        }
                    });
                }
            });

        }

    });
</script>
</body>
</html>